<template>
<div class="platform common-page" ref="main">
  <xdh-grid-layout :layout="layout" fit-row>
    <div class="north-west grid-item" style="" slot="0">
      <processing-case @on-app-open="openApp"></processing-case>
    </div>
    <div class="north-east grid-item"  slot="1">
      <div class="my-apps-wrap">
        <my-apps :panel-el="mainDom" @on-app-open="openApp"></my-apps>
      </div>
      <div class="my-jobs-wrap">
        <my-jobs @on-app-open="openApp"></my-jobs>
      </div>
    </div>
    <div class="south-west grid-item" slot="2">
      <pending-task></pending-task>
    </div>
    <div class="south-east grid-item" slot="3">
      <relation-message></relation-message>
    </div>
  </xdh-grid-layout>
</div>
</template>

<script>
import XdhGridLayout from '@/widgets/xdh-grid-layout'
import ProcessingCase from '../components/home-page/processing-case'
import MyJobs from '../components/home-page/my-jobs'
import RelationMessage from '../components/home-page/relation-message'
import PendingTask from '../components/home-page/pending-task'
import myApps from '../components/apps-control/my-apps'

export default {
  name: 'platform',
  components: {
    myApps,
    XdhGridLayout,
    ProcessingCase,
    MyJobs,
    RelationMessage,
    PendingTask
  },
  data() {
    return {
      layoutOpt: {
        south: { height: 'auto' } // '32px'
      },

      layout: [
        {'x': 0, 'y': 0, 'w': 7, 'h': 1, 'i': '0'},
        {'x': 7, 'y': 0, 'w': 5, 'h': 1, 'i': '1'},
        {'x': 0, 'y': 1, 'w': 7, 'h': 1, 'i': '2'},
        {'x': 7, 'y': 1, 'w': 5, 'h': 1, 'i': '3'}
      ],
      
      
      mainDom: null
    

    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
    openApp(app) { 
      let openApp = {
        ...app,
        closable: true,
        closed: true
      }
      this.$store.commit('apps/addAppsArray', openApp)
    }
  },
  created() {
  },
  mounted() {
    this.mainDom = this.$refs.main
 
  }
}
</script>

<style scoped lang="scss">
@import "../style/_vars.scss";

.platform{
  background: $--background-color-base;
  .grid-item{
    height: 100%;
  }
  .north-west.grid-item{ color: black; }
  .north-east.grid-item{
    display:flex;
    flex-flow: column;
    .my-apps-wrap{
      flex: 1;
      width: 100%;
      margin-bottom: 10px;
    }
    .my-jobs-wrap{
      flex: 0 1 auto;
      width: 100%;
      // background: orange;
    }
  }
}
</style>
